<style scoped>
.additional_outer{display: flex;flex-direction: column;max-height: 500px;padding: 10px;position: relative;}
.group{overflow-y: scroll;}
.additional_row{padding-top: 5px;}
.additional_row h4{font-weight: bold;}
.additional_row .item{min-width: 4em;margin: 0 0 5px 8px;text-align: center;}
.footer{padding: 10px 10px 0;}
.footer>.flex{height: 32px;border-radius: 16px;overflow: hidden;}
.footer>.flex>*{background-color: #ff9200;color: #fff;line-height: 32px;text-align: center;}
.footer>.flex>.buy{background: #d62e2e;}
.footer>.flex>.ok{background: var(--color-primary);}
</style>
<template>
  <van-popup v-model:show="is_show" round position="bottom" safe-area-inset-bottom closeable teleport="body">
    <div class="additional_outer">
      <div class="group max">
        <div v-for="(row,i) in group" class="additional_row">
          <template v-if="!row.parent_key || additional_select[row.parent_key]">
            <h4><span v-if="row.required===1" style="color: #ff0000">*</span>{{row.title}} （{{row.multiple===1?'多选':'单选'}}）</h4>
            <div class="flex" style="flex-wrap: wrap;">
              <van-button class="item" v-for="(v,j) in row.children" :type="additional_select[v.key]?'primary':'default'" hairline size="small" @click="click(row,v)" >
                <p>{{additional_map[v.id].title}} X{{additional_map[v.id].num}}</p>
                <p class="money">{{Number(additional_map[v.id].final_all_price).toFixed(2)}}</p>
              </van-button>
            </div>
          </template>
        </div>
      </div>
      <div class="footer">
        <div class="flex">
          <div class="ok max" @click="submit">确定</div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>

import {msg} from "@/js/vant_tool.js";
import {reactive} from "vue";
import {json_decode_object, s94_event} from "@/js/s94_tool.js";

const _this = reactive({
  is_show: false,
  callback: function (){},
  cancel(){},

  group: [],
  list: [],
  additional_map: {},
  additional_select: {},
  num_show:0,
})

export function select_additional(list, group, additional_select){
  _this.additional_map = {};
  list.forEach(row=>{
    _this.additional_map[row.id] = row;
  })
  _this.group = group;

  // 加购项选择初始化
  if (typeof (additional_select) == 'string') {
    additional_select = json_decode_object(additional_select);
  }
  _this.additional_select = additional_select;
  _this.group.forEach(row=>{
    if (row.parent_key && !_this.additional_select[row.parent_key]) return;
    if (row.required != 1) return;
    let has = row.children.some(v=>{ return !!_this.additional_select[v.key] });
    if (!has) {
      let first_v = row.children[0];
      if(first_v) _this.additional_select[first_v.key] = _this.additional_map[first_v.id].num;
    }
  })

  _this.is_show = true;
  return new Promise((resolve,reject)=>{
    _this.callback = resolve;
    _this.cancel = reject;
  })
}
select_additional._this = _this;
select_additional.hide = function(){
  _this.is_show = false;
}

s94_event('router.after', ()=>{
  _this.is_show = false;
})
export default {
  props: {},
  emits: ['submit'],
  data(){
    return _this
  },
  methods: {
    submit(){
      this.is_show = false;
      this.callback(this.additional_select);
    },
    click(group_row, row){
      let additional_row = this.additional_map[row.id];
      let is_on = !!this.additional_select[row.key];
      let delete_keys = [];
      if (is_on){
        delete this.additional_select[row.key];
        delete_keys.push(row.key);
      }else {
        this.additional_select[row.key] = additional_row.num;
      }
      let select_count = 0;
      group_row.children.forEach(v=>{
        if (this.additional_select[v.key]) select_count++;
      })
      if (group_row.required == 1 && !select_count) {
        this.additional_select[row.key] = additional_row.num;
        msg(`${group_row.title}必选`);
      }
      if (group_row.multiple != 1) {
        group_row.children.forEach(v=>{
          if (v.key !== row.key && this.additional_select[v.key]) {
            delete this.additional_select[v.key];
            delete_keys.push(v.key);
          }
        })
      }
      this.delete_children(delete_keys); //删除下级的选择

      this.group.forEach(row=>{
        if (row.parent_key && !this.additional_select[row.parent_key]) return;
        if (row.required != 1) return;
        let has = row.children.some(v=>{ return !!this.additional_select[v.key] });
        if (!has) {
          let first_v = row.children[0];
          if(first_v) this.additional_select[first_v.key] = this.additional_map[first_v.id].num;
        }
      })
    },
    delete_children(keys){
      if (!keys.length) return;
      let delete_keys = [];
      this.group.forEach(group_row=>{
        if (!group_row.parent_key) return;
        if (group_row.parent_key && keys.includes(group_row.parent_key)){
          group_row.children.forEach(v=>{
            if (this.additional_select[v.key]) {
              delete this.additional_select[v.key];
              delete_keys.push(v.key);
            }
          })
        }
      })
      this.delete_children(delete_keys);
    },
  },
  mounted() {
  }
}
</script>